<template>
  <div>
    <header>
        <n-bar></n-bar>
      <div class="search">
        <label for="search">
          <i class="iconfont icon-fangdajing"></i>
        </label>
        <input
          type="text"
          class="iconfont"
          id="search"
          placeholder="按内容搜索"
        />
      </div>
    </header>
    <!-- 搜索提示 -->
    <van-empty
      description="暂无数据~~~换个关键词试试~~"
      image="search"
      v-if="goodslist == null"
    >
      <van-button round type="danger" class="bottom-button"
        >随便逛逛</van-button
      >
    </van-empty>

    <div class="list" v-else>
      <div class="list_bot">
        <van-card
          @click="goDetail(item.id)"
          v-for="item in goodslist"
          :key="item.id"
          :price="item.price | toPrice"
          :origin-price="item.market_price | toPrice"
          :title="item.goodsname"
          :thumb="item.img"
        >
        </van-card>
      </div>
    </div>
  </div>
</template>

<script>
import { Search } from "../requset/app";
export default {
  data() {
    return {
      goodslist: [],
      kw: this.$route.query.keywords,
    };
  },
  mounted() {
    Search({
      keywords: this.$route.query.keywords,
    }).then((res) => {
      // console.log(res, "搜索列表");
      if (res.code == 200) {
        this.goodslist = res.list;
      }
    });
  },
   methods: {
    //  跳转详情
    goDetail(id){
      this.$router.push({
        path:'/detail',
        query:{
          id
        }
      })
    }
  },
};
</script>

<style scoped>
/* 头部 */
header {
  background-color: #ff6040;
  box-shadow: 0 0.02rem 0.06rem 0 rgba(255, 149, 128, 0.5);
  box-sizing: border-box;
}
.bottom-button {
  width: 1.6rem;
  height: 0.4rem;
  background-color: #ff9917;
  border: none;
  font-size: 0.16rem;
  margin-top: 0.2rem;
}

/* 顶部信息 */
header .top_box {
  height: 0.44rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.06rem 0 0.17rem;
  box-sizing: border-box;
}

header .top_box > a span {
  font-size: 0.17rem;
  color: #ffffff;
}

header .top_box h2 {
  opacity: 0.8;
  font-size: 0.17rem;
  color: #ffffff;
  margin-left: 0.23rem;
}

header .top_box .more {
  width: 0.87rem;
  height: 0.32rem;
  background: rgba(255, 119, 51, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.405rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

header .top_box .more .line {
  width: 1px;
  height: 0.19rem;
  background: rgba(255, 255, 255, 0.25);
}

header .top_box .more a span {
  font-size: 0.19rem;
  opacity: 0.8;
  color: #ffffff;
}

header .search {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.12rem;
  background-color: #ff6040;
  box-shadow: 0 0.02rem 0.06rem 0 rgba(255, 149, 128, 0.5);
}

header .search i {
  position: absolute;
  left: 0.15rem;
  top: 0.05rem;
  font-size: 0.16rem;
  color: #999;
}

header .search input {
  width: 3.55rem;
  height: 0.32rem;
  border: none;
  border: 1px solid #e6e6e6;
  font-size: 0.14rem;
  color: #999999;
  background: #ffffff;
  border-radius: 0.03rem;
  margin-bottom: 0.1rem;
  padding-left: 0.22rem;
  box-sizing: border-box;
}

.list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* .list_bot ul li {
  display: flex;
  margin-top: 0.2rem;
}

.list_bot ul li img {
  width: 1.08rem;
  height: 1.09rem;
}

.list_bot .right {
  margin-left: 0.15rem;
}

.list_bot .right p:nth-child(1) {
  font-size: 0.15rem;
  color: #333333;
  width: 2.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list_bot .right p:nth-child(2) {
  font-size: 0.14rem;
  color: #999999;
}

.list_bot .right p:nth-child(3) {
  font-size: 0.1rem;
  color: #999999;
}

.list_bot .right p:nth-child(3) span:nth-child(1) {
  font-size: 0.1rem;
  color: #ff6040;
}

.list_bot .right p:nth-child(3) span:nth-child(2) {
  font-size: 0.2rem;
  color: #ff6040;
}

.list_bot .right p:nth-child(4) {
  width: 1.1rem;
  height: 0.16rem;
  background: #ff8066;
  font-size: 0.1rem;
  color: #ffffff;
  text-align: center;
  line-height: 0.16rem;
}

.list_bot .right p:nth-child(5) {
  font-size: 0.1rem;
  color: #999999;
} */
</style>
